<template>
  <div class="app-container">
    <!-- 进度条 -->
    <steps :active-step="1" />
    <!-- 添加按钮 -->
    <el-button type="primary" size="small" @click="openChapter"
      >添加章节</el-button
    >
    <!-- 章节小节展示 -->
    <ul style="margin-top: 20px">
      <li class="item" v-for="item in chapterVideoList" :key="item.id">
        <h3 class="item-one">
          <span>{{ item.title }}</span>
          <div>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-plus"
              @click="openVideoDialog(item.id)"
              >添加小节</el-button
            >
            <el-button
              type="success"
              size="mini"
              icon="el-icon-edit"
              @click="handleLookChapter(item.id)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="handleDelChapter(item.id)"
              >删除</el-button
            >
          </div>
        </h3>
        <ul>
          <li v-for="child in item.children" :key="child.id">
            <h4 class="item-two">
              <span>{{ child.title }}</span>
              <div>
                <el-button
                  type="success"
                  size="mini"
                  icon="el-icon-edit"
                  @click="handleLookVideo(child.id)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  @click="handleDelVideo(child.id)"
                  >删除</el-button
                >
              </div>
            </h4>
          </li>
        </ul>
      </li>
    </ul>
    <!-- 章节dialog弹框 -->
    <el-dialog
      title="章节"
      :visible.sync="chapterDialog"
      width="30%"
      @close="closeChapter"
    >
      <el-form
        label-width="80px"
        :model="chapterForm"
        :rules="chapterFormRules"
        ref="chapterFormRef"
      >
        <el-form-item label="章节名称" prop="title">
          <el-input v-model="chapterForm.title"></el-input>
        </el-form-item>
        <el-form-item label="显示排序" prop="sort">
          <el-input-number
            :min="0"
            v-model="chapterForm.sort"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="chapterDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveChapter">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 小节dialog弹框 -->
    <el-dialog
      title="小节"
      :visible.sync="videoDialog"
      width="30%"
      @close="closeVideo"
    >
      <el-form
        label-width="80px"
        :model="videoForm"
        :rules="videoFormRules"
        ref="videoFormRef"
      >
        <el-form-item label="小节名称" prop="title">
          <el-input v-model="videoForm.title"></el-input>
        </el-form-item>
        <el-form-item label="显示排序" prop="sort">
          <el-input-number :min="0" v-model="videoForm.sort"></el-input-number>
        </el-form-item>
        <el-form-item label="是否免费">
          <el-radio-group v-model="videoForm.isFree">
            <el-radio :label="true">免费</el-radio>
            <el-radio :label="false">收费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传视频">
          <el-upload
            :on-success="handleVodUploadSuccess"
            :on-remove="handleVodRemove"
            :before-remove="beforeVodRemove"
            :on-exceed="handleUploadExceed"
            :file-list="fileList"
            :action="BASE_API+'/eduvod/video/uploadAliyunVideo'"
            :limit="1"
            class="upload-demo">
        <el-button size="small" type="primary">上传视频</el-button>
        <el-tooltip placement="right-end">
            <div slot="content">最大支持1G，<br>
                支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
            <i class="el-icon-question"/>
        </el-tooltip>
        </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="videoDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveVideo">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 操作按钮 -->
    <el-button type="primary" @click="handlePre">上一步</el-button>
    <el-button type="primary" @click="handleNext">保存并下一步</el-button>
  </div>
</template>

<script>
import Steps from "./components/steps";
import chapterApi from "@/api/chapter";
import videoApi from "@/api/video";
export default {
  components: {
    Steps,
  },
  data() {
    return {
      fileList:[],
      BASE_API:process.env.BASE_API,
      chapterDialog: false,
      videoDialog: false,
      courseId: null,
      chapterVideoList: [],
      chapterForm: {
        courseId: null, //课程ID
        id: null, //章节ID
        sort: 0, // 显示排序
        title: null, //章节名称
      },
      videoForm: {
        id: null, //小节ID
        courseId: null, //课程ID
        chapterId: null, // 章节id
        sort: 0, // 显示排序
        title: null, //小节节名称
        isFree: false,
        videoSourceId:null,
        videoOriginalName:null
      },
      chapterFormRules: {
        title: [
          {
            required: true,
            message: "章节名称不能为空",
            trigger: "blur",
          },
        ],
        sort: [
          {
            required: true,
            message: "排序不能为空",
            trigger: "blur",
          },
        ],
      },
      videoFormRules: {
        title: [
          {
            required: true,
            message: "小节名称不能为空",
            trigger: "blur",
          },
        ],
        sort: [
          {
            required: true,
            message: "排序不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    if (this.$route.query.courseId) {
      this.courseId = this.$route.query.courseId;
      this.chapterForm.courseId = this.courseId;
      this.getList();
    }
  },
  methods: {
    // 上传视频之前
    handleUploadExceed() {
      this.$message.warning("想要重新上传视频，请先删除之前上传的的视频")
    },
    // 上传小节视频成功
    handleVodUploadSuccess(response,file,fileList) {
        this.videoForm.videoSourceId = response.data.videoId;
        this.videoForm.videoOriginalName = file.name;
    },
    // 删除之前先弹框 是否删除
    beforeVodRemove(file,fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    // 删除视频
    async handleVodRemove(file, fileList) {
      let res = await videoApi.deleteAlyVod(this.videoForm.videoSourceId);
      if(res.success) {
        this.$message.success("删除视频成功");
        this.fileList = [];
        this.videoForm.videoSourceId = null;
        this.videoForm.videoOriginalName = null;
      }else {
        return this.$message.error(res.msg)
      }
    },
    
    
    async getList() {
      let res = await chapterApi.getChapterVideo(this.courseId);
      console.log(res);
      if (res.success) {
        let arr = res.data.list;
        arr.sort((a, b) => a.sort - b.sort);
        this.chapterVideoList = arr;
      } else {
        return this.$message.error(res.msg);
      }
    },
    handlePre() {
      this.$router.push({
        path: "/course/info",
        query: {
          courseId: this.courseId,
        },
      });
    },
    handleNext() {
      this.$router.push({
        path: "/course/publish",
        query:{
          courseId:this.courseId
        }
      });
    },
    openChapter() {
      this.chapterDialog = true;
    },
    closeChapter() {
      this.chapterForm = {};
    },
    handleSaveChapter() {
      this.$refs.chapterFormRef.validate((v) => {
        if (v) {
          if (this.chapterForm.id) {
            this.handleEditChapter();
          } else {
            this.handleAddChapter();
          }
        }
      });
    },
    async handleAddChapter() {
      this.chapterForm.courseId = this.courseId;
      let res = await chapterApi.addChapter(this.chapterForm);
      if (res.success) {
        this.$message.success("添加章节成功");
        this.chapterDialog = false;
        this.getList();
      } else {
        return this.$message.error(res.msg);
      }
    },
    async handleEditChapter() {
      let res = await chapterApi.updateChapter(this.chapterForm);
      if (res.success) {
        this.$message.success("更新章节成功");
        this.chapterDialog = false;
        this.getList();
      } else {
        return this.$message.error(res.msg);
      }
    },
    async handleLookChapter(id) {
      let res = await chapterApi.getChapter(id);
      if (res.success) {
        this.chapterForm = res.data.eduChapter;
        this.chapterDialog = true;
      } else {
        return this.$message.error(res.msg);
      }
    },
    handleDelChapter(id) {
      this.$confirm("此操作将永久删除这个章节, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let res = await chapterApi.deleteChapter(id);
        if (res.success) {
          this.$message.success("删除章节成功");
          this.getList();
        } else {
          return this.$message.error("删除章节失败");
        }
      });
    },
    openVideoDialog(id) {
      this.videoForm.courseId = this.courseId;
      this.videoForm.chapterId = id;
      this.videoDialog = true;
    },
    closeVideo() {
      this.videoForm = {};
      this.fileList = []
    },
    handleSaveVideo() {
      this.$refs.videoFormRef.validate((v) => {
        if (v) {
          if (this.videoForm.id) {
            this.handelEditVideo();
          } else {
            this.handelAddVideo();
          }
        }
      });
    },
    async handelAddVideo() {
      let res = await videoApi.addVideo(this.videoForm);
      if (res.success) {
        this.$message.success("添加小节成功");
        this.videoDialog = false;
        this.getList();
      } else {
        return this.$message.error(res.msg);
      }
    },

    async handelEditVideo() {
      let res = await videoApi.updateVideo(this.videoForm);
      if (res.success) {
        this.$message.success("添加小节成功");
        this.videoDialog = false;
        this.getList();
      } else {
        return this.$message.error(res.msg);
      }
    },
    async handleLookVideo(id) {
      let res = await videoApi.getVideo(id);
      if (res.success) {
        this.videoForm = res.data.eduVideo;
        this.videoDialog = true;
      } else {
        return this.$message.error(res.msg);
      }
    },
    handleDelVideo(id) {
      this.$confirm("此操作将永久删除这个小节, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let res = await videoApi.deleteVideo(id);
        if (res.success) {
          this.$message.success("删除小节成功");
          this.getList();
        } else {
          return this.$message.error("删除小节失败");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 10px;
}
.item-one {
  line-height: 50px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}
.item-two {
  line-height: 40px;
  border-bottom: 1px solid #ccc;
  margin-left: 40px;
  color: #666;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}
</style>